<template>
  <div   class="detail_pullup isbottom"
   :style="'margin-top:'+data.mt/2+'px; background:'+ data.bg/2">
    <div  class="tab" :style="'background:'+data.bg">
      <p @click="tab_id=1" class="item"><span class="_span detail" :class="tab_id==1?'active' :''">详情</span></p>
      <p  @click="tab_id=2" class="item"><span class="_span params" :class="tab_id==2?'active' :''">参数</span></p>
    </div>'
    <div  class="body" :style="'background:'+data.bg">
      <div  class="detail" v-if="tab_id==1">
        <img  src="../../../../assets/images/no_shopdetail.png" class="detail_img" />
      </div>
      <ul  class="params _ul" v-if="tab_id==2">
        <li  class="_li">
          <p  class="key">key1</p>
          <p  class="value">value1</p>
        </li>
        <li  class="_li">
          <p  class="key">key2</p>
          <p  class="value">value2</p>
        </li>
        <li  class="_li">
          <p  class="key">key3</p>
          <p  class="value">value3</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    props: {
      data: {
        type: Object,
        default: {}
      }
    },
    data(){
      return{
        tab_id:1
      }
    }
  }

</script>

<style lang="scss" scoped>
  .detail_pullup {
      box-sizing: border-box;
      overflow: hidden;
      p{
        margin: 0;
      }
      ul{
        padding: 0;
      }
      .tab {
          width: 100%;
          height: 40px;
          display: flex;
          flex-wrap: nowrap;
          border-bottom: 0.5px solid #e6e7eb;
          justify-content: center;
          .item {
              height: 100%;
              width: 50%;
              display: flex;
              justify-content: center;
              ._span {
                  display: inline-block;
                  height: 100%;
                  text-align: center;
                  justify-content: center;
                  position: relative;
                  font-size: 14px;
                  color: #565656;
                  position: relative;
                  display: flex;
                  flex-direction: column;
                  &.active {
                      font-size: 16px;
                      font-weight: bold;
                      color: #212121;
                     &::after {
                          content: '';
                          position: absolute;
                          width: 100%;
                          height: 2px;
                          background: #FF3C29;
                          bottom: 0;
                          left: 0;
                          right: 0;
                          border-radius: 3px;
                      }
                  }
              }
          }
      }
      .body {
          width: 100%;
          display: flex;
          flex-direction: column;
          background: #fff;
          overflow: hidden;
          padding: 16px 0;
          .detail {
              padding: 0;
              .detail_img {
                  width: 100%;
              }
          }
          .params {
              display: flex;
              flex-direction: column;
              width: 351px;
              margin: auto;
              border-top: 0.5px solid #e6e7eb;
              ._li {
                  display: flex;
                  flex-wrap: nowrap;
                  width: 100%;
                  min-height: 40px;
                  border-right: 0.5px solid #e6e7eb;
                  border-bottom: 0.5px solid #e6e7eb;
                  border-left: 0.5px solid #e6e7eb;
                  .key {
                      width: 106px;
                      -ms-flex-negative: 0;
                      flex-shrink: 0;
                      border-right: 0.5px solid #e6e7eb;
                      font-size: 12px;
                      line-height: 17px;
                      color: #969696;
                      padding: 12px;
                  }
                  .value {
                      flex: 1;
                      font-size: 12px;
                      line-height: 17px;
                      color: #212121;
                      padding: 12px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      overflow: hidden;
                      word-break: break-all;
                  }
              }
          }
      }
  }
</style>
